<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_tms_waybill_order_info')" />

    <ex_super_desc :model="baseOption" :data="form" size="default" direction="vertical" :column="4" border
      class="desc_flex_row" labelClassName="flex_cell" contentClassName="flex_cell"></ex_super_desc>

    <ex_header_spiler :title="$tt('label_container_details')" />

    <ex_super_table v-bind="containerDetailsOption" :data="form.orderDetails" ref="containerDetailsRef" />

    <!-- <ex_header_spiler :title="$tt('label_receivable_accounts_details')" />

    <el-row style="padding: 15px 0;">
      <el-col :span="8">{{ $t('label_total_amount_receivable') }}:xx元</el-col>
      <el-col :span="8">{{ $t('label_accounts_receivable_status') }}</el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <ex_super_table v-bind="receivableOption" :data="form.containerList" /> -->

    <!-- <ex_header_spiler :title="$tt('label_receivable_accounts_details')" />
    <ex_super_table v-bind="billOption" :data="form.omsInboundBillDetailVOList ? form.omsInboundBillDetailVOList : []"
      size="default"  /> -->

  </div>
</template>
<script>


import router_params from '@/mixin/router_params';

export default {

  title: "title_packet_order_details",
  mixins: [router_params],
  data() {
    return {
      loading: false,

      form: {},
      baseOption: [
        { key: 'trackNumber', label: 'label_order_code', },
        // { key: 'platformOrderCode', label: 'label_srm_api_order_order_code', },
        // { key: 'platformName', label: 'label_srm_api_service_platform_name', },
        // { key: '', label: 'label_order_type', formatter: (r, c, v, i) => this.$enumShow(v, "TrackTaskTypeEnum") },
        { key: 'totalQuantity', label: 'label_tms_track_pkgs', },
        // { key: 'receiptAddress', label: 'label_consignee_address', },
        // { key: 'receivingOrderCode', label: 'label_package_type', },
        // { key: 'selfDeliveryLogisticsTrackNumber', label: 'transit_waybill_number', },
        // { key: 'transportType', label: 'label_tms_waybill_transport_mode', formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum") },
        { key: 'totalVolume', label: 'label_volume', },
        { key: 'totalWeight', label: 'label_weight', },
        {
          key: 'searchKeyword', label: 'label_detail_address',
          render: (h, { data }) => {
            return `${data.receiptCountryName || ''}${data.receiptProvinceName || ''}${data.receiptCityName || ''}${data.receiptAreaName || ''}${data.receiptAddress || ''}`
          }
        },
        // { key: 'receivingOrderCode', label: 'label_final_order', },
        { key: 'status', label: 'label_order_status', formatter: (r, c, v, i) => this.$enumShow(v, "TmsOrderStatusEnum") },
        // { key: 'skuName', label: '品名', },
        // { key: 'skuName', label: '英文品名', },
        { key: 'deliveryType', label: 'label_delivery_type', formatter: (r, c, v, i) => this.$enumShow(v, "DeliveryTypeEnum") },
        { key: 'lastTransportType', label: 'label_delivery_method', formatter: (r, c, v, i) => this.$enumShow(v, "TmsLastTransportTypeEnum") },
        // { key: 'receivingOrderCode', label: 'label_delivery_order', },
        // { key: 'receivingOrderCode', label: 'label_is_electrical', },
        { key: 'skuAmount', label: 'label_total_value', },
        { key: 'orderAmount', label: 'label_order_money', },
        // { key: 'receivingOrderCode', label: 'label_is_return_order', },
        { key: 'remark', label: 'label_remark', },
        { key: 'creator', label: 'label_create_user', },
        { key: 'gmtCreate', label: 'label_create_time', formatter: (r, c, v, i) => this.$dateFormat(v) },
        // { key: 'skuName', label: 'label_mail_goods', },
        { key: 'payType', label: 'label_payment_method', formatter: (r, c, v, i) => this.$enumShow(v, "TmsOrderPayTypeEnum") },

        {
          key: 'omsFiles', label: 'label_attachment_list',
          render: (h, { data }) => {
            const item = data
            return (<ex_super_upload value={item.omsFiles} disabled type="file" />)
          }
        }

      ],
      containerDetailsOption: {
        model: [
          { key: 'transportNumber', label: 'label_packagea_or_container_code', 'show-overflow-tooltip': true, },
          { key: 'weight', label: 'label_plan_weight', 'show-overflow-tooltip': true },
          {
            key: 'length', label: 'label_plan_l_w_h', 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              return row.length && row.width && row.height ? <span>{row.length}*{row.width}*{row.height}</span> : ''
            }
          },
          { key: 'actualWeight', label: 'label_actual_weight', 'show-overflow-tooltip': true },
          {
            key: 'palletNo', label: 'label_reality_l_w_h', 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              return row.actualLength && row.actualWidth && row.actualHeight ? <span>{row.actualLength}*{row.actualWidth}*{row.actualHeight}</span> : ''
            }
          }
        ],
      },
      receivableOption: {
        model: [
          { key: 'palletNo', label: 'label_logistics', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_customer_price', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_pms_service_cost', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_calculate_unit_price', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_billable_quantity', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_money', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_settlement_method', 'show-overflow-tooltip': true },
          { key: 'palletNo', label: 'label_settlement_situation', 'show-overflow-tooltip': true }
        ],
      },
      billOption: {
        attrs: { stripe: true, },
        defaultColAttr: {
          align: 'left',
        },
        model: [
          {
            key: 'productName', label: 'label_logistics', 'min-width': 200,
            render: (h, { row, column }) => this.$renderText(h, this.$formatNameCode(row[column.property], row.productCode)),

          },
          {
            key: 'serviceName', label: 'label_pms_service_cost', 'min-width': 160,
            render: (h, { row, column}) => this.$renderText(h, row[column.property]),
          },

          {
            key: 'price', label: 'label_calculate_unit_price', 'width': 140,
            render: (h, { row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)),

          },
          {
            key: 'calNums', label: 'label_calculate_count', 'width': 120,
            render: (h, { row, column }) => this.$renderText(h, row[column.property]),

          },
          {
            key: 'serviceAmount', label: 'label_money', 'width': 140,
            render: (h, {row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)),

          },
          {
            key: 'status', label: 'label_settlement_situation', 'width': 150,
            render: (h, { row, column}) => this.$renderText(h, this.$enumShow(row[column.property], "FmsBillDetailStatus")),

          },

        ]
      }
    };
  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: this.$url['oms/OmsExpressdetail'],
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.loading = false
            Object.assign(this.form, res.data)
            this.fixTabLabel()

          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      this.$emit("tagModifyLabel", {
        _key: 'label_name_code',
        name: this.$t("title_packet_order_details"),
        code: this.form.id || ""
      })
    },

  }
};

</script>
<style></style>
